<template>
  <div class="mine">
    <header>
      <img class="setIcon" src="..\assets\img\设置@2x(1).png" alt="">
      <div class="title" @click="gotoLogin">
        <div class="userphoto"> <img :src="userinfo.userphoto" alt=""></div>      
        <div class="username">
          <div class="usernameinfo">
            <span>{{ userinfo.username }}</span><em>{{userinfo.main_management}}</em>
          </div>
          <img src="..\assets\img\返回(1)@2x(9).png" alt="">
        </div>
      </div>
      <ul>
        <li>
          <img src="..\assets\img\矢量智能对象@2x(18).png" alt=""><p>我的供应</p>
        </li>
        <li>
          <img src="..\assets\img\矢量智能对象@2x(19).png" alt=""><p>我的采购</p>
        </li>
        <li>
          <img src="..\assets\img\矢量智能对象@2x(20).png" alt=""><p>我的店铺</p>
        </li>
      </ul>
    </header>
    <section>
      <van-cell-group class="mine-group">
        <van-cell title="实名认证" value="立即认证" is-link >
          <template #icon>
            <img class="mine-group-icon" src="../assets/img/个人认证@2x(1).png" alt="">
          </template>
        </van-cell>
        <van-cell title="企业认证"  :value="enterprise" :class="{activeEnterprise:enterprise=='认证成功'}" is-link @click="goEnterprise">
          <template #icon>
            <img class="mine-group-icon" src="../assets/img/企业认证@2x.png" alt="">
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="mine-group">
        <van-cell title="浏览历史" is-link @click="goLookHistory">
          <template #icon>
            <img class="mine-group-icon" src="../assets/img/浏览记录(2)@2x.png" alt="">
          </template>
        </van-cell>
        <van-cell title="我的报价" is-link >
          <template #icon>
            <img class="mine-group-icon" src="../assets/img/报价@2x.png" alt="">
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="mine-group">
        <van-cell title="意见反馈" is-link >
          <template #icon>
            <img class="mine-group-icon" src="../assets/img/意见反馈(1)@2x.png" alt="">
          </template>
        </van-cell>
        <van-cell title="专属客服" is-link >
          <template #icon>
            <img class="mine-group-icon" src="../assets/img/客服@2x.png" alt="">
          </template>
        </van-cell>
      </van-cell-group>
    </section>
  </div>
</template>

<script>
import { ref, reactive, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup(){
    const router = useRouter();
    const store = useStore();
   
    //企业认证变量
    const enterprise=ref("");
    //未登录状态我的页面用户信息默认值
    let userinfo =ref({
      userphoto:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2975996532,2425031589&fm=26&gp=0.jpg',
      username:'点击登录',
      main_management:'未选择',
    });
    //如果本地存储存在token，则用户信息直接获取仓库中的值，否则为默认值
    const getinfo=()=>{
      console.log(444);
      if(localStorage.getItem('userToken')){
          userinfo.value.userphoto=store.state.userInfo.user_avatar;
          userinfo.value.username=store.state.userInfo.user_nickname;
          userinfo.value.main_management=store.state.userInfo.main_management;   
          console.log(userinfo.value.main_management);
      }
    }

    
    onMounted(async ()=>{
     await store.dispatch("getUserInfo");
      getinfo();   
    })
    //点击去登录，若已登录点击则去到个人信息页
    //跳转去登录或者个人信息
    const gotoLogin = () => {
      if(localStorage.getItem("userToken")) {
        router.push("/personalinfo");
      }else {
        router.push("/login");
      }
    }

    //去企业认证
    const goEnterprise=()=>{
       if(localStorage.getItem("userToken")){
          router.push("/enterprise");
       }else {
        router.push("/login");
      }
    }
    //查看浏览记录
    const goLookHistory=()=>{
       if(localStorage.getItem("userToken")){
          router.push("/lookhistory");
       }else {
      router.push("/login");
      }
    }
    onMounted(() => {
       if(localStorage.getItem("userToken")&&localStorage.getItem("Enterprise_Certification")=='true'){
          enterprise.value="认证成功";
       }else{
          enterprise.value="立即认证";
       }
       console.log(enterprise.value);
    });

    //改变是否认证的字
    // const changeWord=computed(() =>  enterprise?"":"")
    return { gotoLogin, userinfo,goEnterprise,enterprise,goLookHistory};
  }
};
</script>
<style lang="scss" scoped>
.mine {
  background: #f5f5f5;
  height: 100%;
}

header {
  width: 100%;
  height: 196.5px;
  background: url("../assets/img/椭圆 2@2x.png") no-repeat left bottom/cover;
  position: relative;
  margin-bottom: 70px;

  .setIcon {
    width: 17px;
    height: 17px;
    position: absolute;
    top: 26.5px;
    right: 16.5px;
  }

  .title {
    position: absolute;
    top: 52.5px;
    display: flex;
    align-items: center;
    width: 100%;

    .userphoto {
      display:inline-block;
      border-radius: 50%;
      overflow: hidden;
      width: 61px;
      height: 61px;
      margin: 0 19px 0 17.5px;
      img{
        height:100%;
        width:100%;
      }
    }

    .username {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      span {
        width: 147px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 20px;
      }

      em {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        background: #313131;
        opacity: 0.46;
        border-radius: 16px;
        padding: 0 5px;
        margin-left: 20px;
      }

      p {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #F6F6F6;
        margin-top: 10px;
      }

      img {
        width: 9px;
        height: 15.5px;
        margin-right: 19px;
      }
    }
  }

  ul {
    width: 339px;
    height: 113px;
    background: #FFFFFF;
    border-radius: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: 18px;
    top: 133px;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 33px;
        height: 33px;
        margin-bottom: 19.5px;
      }
      p {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
      }
    }
  }
}

.mine-group-icon {
  width: 20px;
  height: 100%;
  margin-right: 15px;
}

</style>
